<template>
    <div class="editSchool"
    v-loading="loading"
    element-loading-text="数据加载中。。。。"
    element-loading-spinner="el-icon-loading"
    >
        <div class="addstu-box">
            <div class="title">
                <h1>基本信息</h1>
            </div>
            <div class="addstu-box-contain2">
                <el-form ref="schoolInfo" :inline="true" :rules="fieldRules"  :model="schoolInfo">
                    <el-row>
                        <el-col :span="8">
                          <el-row>
                            <el-col :span="6">
                              <b>学校名称：</b>
                            </el-col>
                            <el-col :span="15">
                              <el-input v-model="schoolInfo.name" placeholder="学校名称"></el-input>
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="8">
                          <el-row>
                            <el-col :span="6">
                              <b>学生学制：</b>
                            </el-col>
                            <el-col :span="15">
                              <el-select v-model="schoolInfo.schoolSystem" placeholder="请选择">
                                    <el-option
                                    v-for="item in student_system_cache_options"
                                    :key="item.fId"
                                    :label="item.fSystemName"
                                    :value="item.fId">
                                    </el-option>
                                </el-select>
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="8">
                          <el-row class="student-level">
                            <el-col :span="8">
                              <b>学段：</b>
                            </el-col>
                            <el-col :span="15">
                              <el-select v-model="schoolSectionArr" multiple placeholder="请选择">
                                    <el-option
                                        v-for="item in student_level_cache_options"
                                        :key="item.key"
                                        :label="item.value"
                                        :value="item.key">
                                    </el-option>
                                </el-select>
                            </el-col>
                          </el-row>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                          <el-row>
                            <el-col :span="6">
                              <b>联系人：</b>
                            </el-col>
                            <el-col :span="15">
                              <el-input v-model="schoolInfo.contact" placeholder=""></el-input>
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="8">
                          <el-row>
                            <el-col :span="6">
                              <b> <em style="color:red">*</em>联系电话：</b>
                            </el-col>
                            <el-col :span="15">
                              <el-form-item label prop="phone" style="width:100%;">
                                <el-input type="number" :disabled="true" v-model="schoolInfo.phone" placeholder=""></el-input>
                              </el-form-item>    
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="8">
                          <el-row>
                            <el-col :span="8">
                              <b> <em style="color:red">*</em> 客户来源：</b>
                            </el-col>
                            <el-col :span="15">
                              <el-form-item label prop="dataFrom" style="width:100%;">
                                <el-select :disabled="true" v-model="schoolInfo.dataFrom" placeholder="请选择" :change="student_data_from_change">
                                    <el-option
                                    v-for="item in student_data_from_options"
                                    :key="item.value"
                                    :label="item.value"
                                    :value="item.key">
                                    {{item.value}}
                                    </el-option>
                                </el-select>
                              </el-form-item> 
                            </el-col>
                          </el-row>
                        </el-col>
                    </el-row>
                   
                  </el-row>
                </el-form>
            </div>
        <!-- </div>
         <div class="addstu-box">
            <div class="title">
                <h1>客户信息</h1>
            </div> -->
            <div class="addstu-box-contain2">
                <el-form :inline="true" :model="schoolInfo">
                    <el-row>
                        <el-col :span="8">
                          <el-row>
                            <el-col :span="6">
                              <b>客户类型：</b>
                            </el-col>
                            <el-col :span="15">
                              <el-select v-model="schoolInfo.type" :disabled="typeDisabled" placeholder="请选择" @change="typeChange">
                                    <el-option
                                    v-for="item in student_type_options"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key">
                                    </el-option>
                                </el-select>
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="8">
                          <el-row>
                            <el-col :span="6">
                              <b>客户进展：</b>
                            </el-col>
                            <el-col :span="15">
                              <el-select v-model="schoolInfo.progress" :disabled="selectDisabled"  placeholder="请选择" @change="progressChange">
                                    <el-option
                                    v-for="item in student_progress_options"
                                    :key="item.key"
                                    :label="item.value"
                                    :value="item.key">
                                    </el-option>
                                </el-select>
                            </el-col>
                          </el-row>                         
                        </el-col>
                        <el-col :span="8">
                            <el-row>
                              <el-col :span="8">
                                <b>所属第三方：</b>
                              </el-col>
                              <el-col :span="14">
                                <el-input v-model="schoolInfo.thirdPatry"></el-input>
                              </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                           <el-row>
                              <el-col :span="6">
                                <b>性别：</b>
                              </el-col>
                              <el-col :span="15">
                                <el-radio-group v-model="schoolInfo.sex" style="margin-top:6%">
                                  <el-radio :label="1">男</el-radio>
                                  <el-radio :label="2">女</el-radio>
                                </el-radio-group>
                              </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                          <el-row>
                            <el-col :span="6">
                              <b>学生年龄：</b>
                            </el-col>
                            <el-col :span="15">
                              <el-input  max="100" min="1"  type="number" v-model="schoolInfo.age" placeholder></el-input>
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="8">
                          <el-row>
                            <el-col :span="8">
                              <b>意向合作模式：</b>
                            </el-col>
                            <el-col :span="14">
                              <el-input v-model="schoolInfo.intentionCooperationMode"  placeholder=""></el-input>
                            </el-col>
                          </el-row>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                          <el-row>
                            <el-col :span="6">
                              <b>微信：</b>
                            </el-col>
                            <el-col :span="15">
                              <el-input v-model="schoolInfo.wechat" placeholder></el-input>
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="8">
                          <el-row>
                            <el-col :span="6">
                              <b>QQ：</b>
                            </el-col>
                            <el-col :span="15">
                              <el-input  type="number" v-model="schoolInfo.qq" placeholder></el-input>
                            </el-col>
                          </el-row>   
                        </el-col>
                        <el-col :span="8">
                          <el-row>
                            <el-col :span="8">
                              <b>邮箱：</b>
                            </el-col>
                            <el-col :span="14">
                              <el-input  type="email" v-model="schoolInfo.email" placeholder></el-input>
                            </el-col>
                          </el-row>  
                        </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="2">
                        <b>所在地区：</b>
                      </el-col>
                      <el-col :span="10" style="text-algin:left">
                        <el-cascader
                            size="large"
                            :options="options"
                            v-model="selectedOptions"
                            @change="handleChange">
                        </el-cascader>
                      </el-col>
                      <el-col :span="8">
                        <el-input
                        v-model="schoolInfo.areaInput"
                        placeholder="请输入详细地址"
                      ></el-input>
                      </el-col>
                    </el-row>  
                </el-form>
            </div>
        </div>
        <div class="addstu-box">
            <div class="title">
                <h1>签约信息</h1>
            </div>
            <div class="addstu-box-contain2">
                <el-form :inline="true" :model="schoolInfo">
                    <el-row>
                            <el-col :span="8">
                              <el-row>
                                <el-col :span="8">
                                  <b>签约学校名称：</b>
                                </el-col>
                                <el-col :span="14">
                                  <el-input v-model="schoolInfo.signSchool" placeholder="签约学校名称"></el-input>
                                </el-col>
                              </el-row>
                            </el-col>
                            <el-col :span="5">
                              <el-row>
                                <el-col :span="9">
                                  <b>分成比例：</b>
                                </el-col>
                                <el-col :span="13">
                                   <el-input v-model="schoolInfo.proportion" placeholder="分成比例"></el-input>
                                </el-col>
                              </el-row>
                            </el-col>
                            <el-col :span="11">
                              <el-row>
                                <el-col :span="6">
                                  <b>合同有效期：</b>
                                </el-col>
                                <el-col :span="17">
                                  <el-date-picker
                                        style="width:100%"
                                        v-model="contractDate"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :default-time="['00:00:00', '23:59:59']" 
                                        value-format="yyyy-MM-dd HH:mm:ss" 
                                        format="yyyy-MM-dd HH:mm:ss">
                                    </el-date-picker>
                                </el-col>
                              </el-row>
                            </el-col>
                    </el-row>
                     <el-row>
                        <el-col :span="24">
                          <el-row>
                            <el-col :span="3">
                              <b>备注：</b>
                            </el-col>
                            <el-col :span="21">
                              <el-input style="margin-left:-2%" type="textarea" v-model="schoolInfo.comment"></el-input>
                            </el-col>
                          </el-row>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <KtButton
        :label="$t('action.close')"
        perms="true"
        size="medium"
        style="margin-right: 2%;"
        @click="closeSelectedTag"
      ></KtButton>
        <kt-button class="stu-btn" :label="$t('action.save')" perms="true" size="medium" @click="handleSave()" />
         
    </div>
</template>
<script>
import { hasPermission } from "@/permission/index.js";
import axios from "axios";
import KtButton from "@/views/Core/KtButton";
import api from "@/http/api";
import StTable from "@/views/Core/StTable";
import { regionData } from "element-china-area-data";
export default {
  name: "EditSchool",
  components: {
    KtButton,
    StTable
  },
  data() {
    return {
      disabled:false,
      selectDisabled:false,//跟进弹窗客户进展状态
      typeDisabled:false,
      schoolInfo: {
        name: "",
        schoolSystem: "",
        contact: "",
        phone: "",
        schoolSection: "",
        dataFrom: "",
        dataFromType: "",
        type: "",
        progress: "",
        province: "",
        city: "",
        area: "",
        areaInput: "",
        age: "",
        sex: "",
        intentionCooperationMode: "",
        wechat: "",
        qq: "",
        email: "",
        signSchool: "",
        proportion: "",
        contractStartDate: "",
        contractEndDate:"",
        comment:"",
        firstLevelDepartment:"",
        secondLevelDepartment:"",
        thirdLevelDepartment:"",
        createDate: "",
        updateDate: "",
        assignDate: "",
        trackingNum:"",
        nextTrackingDate: "",
        assignType: "",
        createType: "1",
        importDepartment: "",
        isLock: "",
        id: "",   
    },

    student_system_cache_options: [
        {
          label: " ",
          key: " "
        }
    ],

    student_level_cache_options:[
        {
          key: " ",
          value: " "
        }
      ],


      student_data_from_options: [
        {
          label: " ",
          key: " "
        }
      ],

      student_type_options:[
        {
          label: " ",
          key: " "
        }
      ],
      student_progress_options: [
        {
          label: " ",
          key: " "
        }
      ],

        //   表单验证
      fieldRules: {
        name: [{ required: true, message: "请输入学生姓名", trigger: "blur" }],
        school: [
          { required: true, message: "学校名称", trigger: "blur" }
        ],
        oemAccount: [
          { required: true, message: "请输入学籍号", trigger: "blur" }
        ],
        schoolSystem: [
          { required: true, message: "请输入学生学制", trigger: "blur" }
        ],
        grade: [{ required: true, message: "请输入就读年级", trigger: "blur" }],
        account: [
          { required: true, message: "请输入学生账号", trigger: "blur" }
        ],
        parentName: [
          { required: true, message: "请输入家长姓名", trigger: "blur" }
        ],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        type: [
            {type: 'array', required: true, message: '请至少选择一项', trigger: 'change' }
        ],
        dataFrom: [
          {
            required: true,
            message: "请选择客户来源",
            trigger: "change"
          }
        ]
      },
      //   地区
      options: regionData,
      selectedOptions: [],//省市区数组
      contractDate:[],//时间数据
      schoolSectionArr:[],//学段数组
      selection: false,
      stuTableData: [],
      columns: [
        { prop: "id", label: "序号", minWidth: 50 },
        { prop: "usernumber", label: "跟进时间", minWidth: 80 },
        { prop: "name", label: "联系人", minWidth: 80 },
        { prop: "OEM", label: "沟通形式", minWidth: 80 },
        { prop: "OEMcategory", label: "客户类型", minWidth: 100 },
        { prop: "role", label: "客户进展", minWidth: 70 },
        { prop: "threeDepartment", label: "下次跟进时间", minWidth: 100 }
      ],
      pageResult: {},
      pageRequest: { pageNum: 1, pageSize: 8 },
      editLoading: false,
      loading:false
    };
  },
  watch: {
    // $route: "getParams"
  },
  beforeMount: function() {
    //   请求页面传过来的ID根据ID发送请求
    let routerParams = this.$route.query;
    let queryid = routerParams.id;
    this.schoolInfo.id = queryid;
    var queryParams={id:queryid};
    api.school.schoolQueryInfo(queryParams).then(res => {
      if(res.result==1){
         let resData = res.schoolInfo;
         this.contractStartDate=res.contractStartDate
         this.contractEndDate=res.contractEndDate
         this.id = queryid;
          //时间赋值
          if(resData.contractStartDate!=null&resData.contractEndDate!=null){
            this.contractDate.push(
              ""+JSON.stringify(resData.contractStartDate)+"",
              ""+JSON.stringify(resData.contractEndDate)+""
            );
          }else{
            
          }
        this.schoolInfo=resData
        if(this.schoolInfo.sex=='男'){
          this.schoolInfo.sex=1
        }else{
          this.schoolInfo.sex=2
        }
        if(resData.schoolSection!=""){
           this.schoolSectionArr=resData.schoolSection.split(",")
        }
       
       }else{
         //报错
       }
    });
  },
  methods: {
     hasPerms: function(perms) {
      // 根据权限标识和外部指示状态进行权限判断
      return hasPermission(perms) & !this.disabled;
    },
    // 关闭保存
    isActive(route) {
      return route.path === this.$route.path;
    },   
    closeSelectedTag(view) {
      this.$store.dispatch("delVisitedViews", this.$route).then(views => {
        if (this.isActive(this.$route)) {
          const latestView = views.slice(-1)[0];
          if (latestView) {
            this.$router.push(latestView);
          } else {
            this.$router.push("/");
          }
        }
      });
    },
    // 获取页面数据
    get_pageData:function(){
      let routerParams = this.$route.query;
      let queryid = routerParams.id;
      this.schoolInfo.id = queryid;
      var queryParams={id:queryid};
       api.school.schoolQueryInfo(queryParams).then(res => {
      if(res.result==1){
         let resData = res.schoolInfo;
         this.contractStartDate=res.contractStartDate
         this.contractEndDate=res.contractEndDate
         this.id = queryid;
         //省市区赋值
        let str = /^[\u4e00-\u9fa5]+$/;
        if(!str.test(resData.province)&&!str.test(resData.city)&&!str.test(resData.area)){
            this.selectedOptions.push(
              "" + JSON.parse(resData.province) + "",
              "" + JSON.parse(resData.city) + "",
              "" + JSON.parse(resData.area) + ""
            );
        }
        
      }
      })
    },
    // // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.pageRequest = data.pageRequest;
      }
      this.pageRequest.columnFilters = {
        name: { name: "name", value: this.filters.name }
      };
      this.$api.user
        .findPage(this.pageRequest)
        .then(res => {
          this.pageResult = res.data;
        })
        .then(data != null ? data.callback : "");
    },
    handleFollow(index, row) {
      this.$emit("handleFollow", { index: index, row: row });
      this.dataForm = Object.assign({}, params.row);
      this.$router.push({ path: "/Follow/SchoolFollow" });
    },
    
    // 保存
    handleSave() {
     let data = Object.assign({}, this.schoolInfo);
     let province=this.selectedOptions[0]
     let city=this.selectedOptions[1]
     let area=this.selectedOptions[2]
     this.schoolInfo.province=province
     this.schoolInfo.city=city
     this.schoolInfo.area=area
     //时间
     let contractDateArr = this.contractDate;
     let contractEndDate =this.contractEndDate
     let contractStartDate =this.contractStartDate
     if(this.contractDate!=null&&this.contractDate.length!=0||contractEndDate!=null&&contractStartDate!=null){
      this.schoolInfo.contractStartDate = this.contractDate[0].replace(/\"/g, ""); //开始时间
      this.schoolInfo.contractEndDate = this.contractDate[1].replace(/\"/g, "")  //结束时间
     }else if(contractEndDate==null&&contractStartDate==null||this.contractDate.length==0||this.contractDate==null){
      this.schoolInfo.contractStartDate = ''; //开始时间
      this.schoolInfo.contractEndDate = ''  //结束时间
     }
      
      
     //学段
     this.schoolInfo.schoolSection = this.schoolSectionArr.join(",");

     let postData = {schoolInfo:this.schoolInfo,createType:1};
     this.$refs.schoolInfo.validate(valid => {
        if (valid) {
          this.loading=true
          this.$api.school.customerManagerUpdate(postData).then(res => {
            if (res.result === 1) {
              this.$message({
                message: res.msg,
                center: true,
                type: "success"
              });
              this.loading=false
              this.closeSelectedTag();
              this.$refs.schoolInfo.resetFields();
            } else if (res.result === 2) {
              this.$message({
                message: res.msg,
                center: true,
                type: "error"
              });
              this.loading=false
            }
          });
        } else {
          this.$api.school.customerManagerUpdate(postData).then(res=>{
                  if(res.result==2){
                  this.$message({
                      message: res.msg,
                      type: 'error'
                      })
                      this.loading=false
                  }else{
                  this.$message({
                      message: res.msg,
                      type: 'success'
                  })
                  this.loading=false
                  }
              })  
            }
        //   this.$message({
        //     message: "请填写关键字段",
        //     center: true,
        //     type: "error"
        //   });
        //   return false;
        // }
      });
    },
     // 获取地区
    handleChange (value){
        this.schoolInfo.city=value
    },

     get_system_cache() {
        this.$api.user.optionsList({ codeType: "system_cache" }).then(res => {
            this.student_system_cache_options = res.systemList;
        });
     },


    // 学段
     get_level_cache() {
      this.$api.user.optionsList({ codeType: "school_section" }).then(res => {
        this.student_level_cache_options = res.keyValueList;
      });
    },

    get_student_data_from() {
      this.$api.user
        .optionsList({ codeType: "school_data_from" })
        .then(res => {
          this.student_data_from_options = res.keyValueList;
        });
    },

    student_data_from_change(value) {
        this.schoolInfo.dataFrom = value.toString();
        console.log(value);
    },

    // 客户类型
    get_student_type() {
      this.$api.user.optionsList({ codeType: "school_type" }).then(res => {
        this.student_type_options = res.keyValueList;
      });
    },

    // 客户进展
    get_student_progress() {
      this.$api.user.optionsList({ codeType: "school_progress" }).then(res => {
        this.student_progress_options = res.keyValueList;
      });
    },

    student_progress_change(value) {
      this.queryBox.student_progressValue = value.toString();
    },
   
    // 点击客户类型
    typeChange(){
      if(this.schoolInfo.type==4){
        this.schoolInfo.progress="6"
      }
    },
    // 点击客户进展
    progressChange(){
      if(this.schoolInfo.progress==6){
        this.schoolInfo.type="4"
      }
    }
    
  },

  mounted() {
      this.get_system_cache();
      this.get_level_cache();
      this.get_student_data_from();
      this.get_student_type();
      this.get_student_progress()
      this.get_pageData()
  }
};
</script>
<style lang='scss' scoped>
.el-row .el-col{
    margin-left: 0 !important;
  }
  .container .el-radio-group .el-radio:first-child{
    display: inline-block !important;
  }
  .addstu-box .el-cascader{
    width: 100% !important;
  }
.addstu-box {
  text-align: left;
  width: 90%;
  margin: 20px auto;
  border: 1px solid #e4e7ed;
  padding-bottom: 20px;
  .title h1 {
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
  }
  .el-row{
    margin: 0 0 2% 0;
  }
  .el-select{
    width: 100%;
  }
  .addstu-box-contain2 {
    margin: 0 auto;
    width: 90%;
  }
  .city-title{
      text-align: right;
    float: left;
    font-size: 14px;
    color: #606266;
    background: none;
    border: none;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}
.addstu-box-contain2 {
  .el-row {
    .el-col b {
      font-style: normal;
      text-align: right;
      float: left;
      font-size: 14px;
      color: #606266;
      line-height: 40px;
      padding: 0 0 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-weight: normal;
    }
  }
}
.addstu-box {
  .el-cascader {
    width: 100%;
  }
}
</style>
<style lang="scss">
.editSchool input::-webkit-outer-spin-button,  
.editSchool input::-webkit-inner-spin-button{  
    -webkit-appearance: none !important;  
    margin: 0;  
} 
.editSchool .el-form--inline .el-form-item__content {
  width: 100%;
}
.editSchool .el-select {
  width: 100%;
}
.editSchool .el-form--inline .el-form-item{
  margin-bottom:0 !important;
}
</style>


